import React, { Component } from 'react';
import connect from './connect';
import { withRouter } from 'react-router-dom'

import { AllDiv } from './style'

@withRouter
@connect
class Login extends Component {

  state = {
    username: '',
    password: '',
  }

  setValue = (e, key) => {
    this.setState({
      [key]: e.target.value.trim()
    })
  }

  login = async () => {
    await this.props.dologinAction(this.state.username, this.state.password)

    // 登录成功后跳转到首页
    this.props.history.push('/')
    console.log(111)
  }

  render() {
    let { username, password } = this.state
    return (
      <AllDiv>
        <div className="imgDiv">
          <img src="https://assets.maizuo.com/h5/mz-auth/public/app/img/logo.19ca0be.png"></img>
        </div>
        <div className="main">
          <p >
            <input type="text" value={username} onChange={e => this.setValue(e, 'username')} placeholder="账号" />
          </p>
          <p>
            <input type="text" value={password} onChange={e => this.setValue(e, 'password')} placeholder="密码" />
          </p>
          <p className="login">
            <button onClick={this.login}>进入系统</button>
          </p>
        </div>

      </AllDiv>
    );
  }
}

export default Login;


// import React, { Component } from 'react';

// class index extends Component {
//   render() {
//     return (
//       <>
//         <div>
//           <input type="text" value={username} onChange={e => this.setValue(e, 'username')} placeholder="账号" />
//         </div>
//         <div>
//           <input type="text" value={password} onChange={e => this.setValue(e, 'password')} placeholder="密码" />
//         </div>
//         <div>
//           <button onClick={this.login}>进入系统</button>
//         </div>
//       </>
//     );
//   }
// }

// export default index;
